<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>员工管理</el-breadcrumb-item>
            <el-breadcrumb-item>员工列表</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片 -->
        <el-card class="box-card" style="margin-top: 10px;">

            <!-- 栅格布局 -->
            <el-row :gutter="20">
                <el-col :span="10">
                    <el-input placeholder="请输入姓名"  class="input-with-select" v-model="pageArgs.searchkey">
                        <el-button slot="append" icon="el-icon-search" @click="secarch"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="3">
                    <el-button type="success" @click="showAddDialog">添加员工</el-button>
                </el-col>
                <el-col :span="4">
                    <el-button type="success" @click="daoChu">导出数据</el-button>
                </el-col>
            </el-row>

            <!-- 表格 -->
            <el-table
                :data="empData"
                border
                style="width: 100%; margin:20px 0px">
                <el-table-column
                type="index"
                label="#">
                </el-table-column>
                <el-table-column
                prop="realName"
                label="姓名">
                </el-table-column>
                <el-table-column
                prop="userName"
                label="帐号">
                </el-table-column>
                <el-table-column
                prop="userPassword"
                label="密码">
                </el-table-column>
                <el-table-column
                prop="userTel"
                label="联系方式">
                </el-table-column>
                <el-table-column
                prop="address"
                label="地址">
                </el-table-column>
                <el-table-column
                prop="createDate"
                :formatter="formatter"
                label="时间">
                </el-table-column>
                <el-table-column
                label="是否激活">
                    <template v-slot="scope">
                        <el-switch
                            v-model="scope.row.active"
                            @change="updateActive(scope.row.userId,scope.row.active)"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                        <!-- {{scope.row}} -->
                    </template>
                </el-table-column>
                <el-table-column
                label="操作">
                    <template v-slot="scope">
                        <el-button type="primary" icon="el-icon-edit" size="small" @click="showUpdateEmpDialog(scope.row.userId)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" size="small" @click="deleteEmp(scope.row.userId)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页组件 -->
            <!-- 
                 @size-change: 每页显示的记录数的改变会发生事件
                @current-change:页码改变触发事件
            -->
            <el-pagination
                @size-change="handleSizeChange"   
                @current-change="handleCurrentChange"
                :current-page="pageArgs.currentPage"
                :page-sizes="[2,4,5,10]"
                :page-size="pageArgs.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageUtil.record">
            </el-pagination>

            <!-- 添加的模态窗口 -->
            <el-dialog title="添加员工" :visible.sync="addDialogTableVisible" width="40%" top="2px">
                <el-form ref="addEmpRef" :model="emp" label-width="100px" :rules="addEmpRules">
                    <el-form-item label="姓名" prop="realName">
                        <el-input v-model="emp.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="帐号" prop="userName">
                        <el-input v-model="emp.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="userPassword">
                        <el-input v-model="emp.userPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="userTel">
                        <el-input v-model="emp.userTel"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="emp.address"></el-input>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-date-picker
                            v-model="emp.createDate"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="是否激活用户">
                        <el-switch
                            v-model="emp.active"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-select v-model="emp.deptno" placeholder="请选择部门">
                            <el-option v-for="dept in deptData" :key="dept.deptno" :label="dept.dname" :value="dept.deptno"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                    
                <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogTableVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addEmp">添 加</el-button>
                </span>
            </el-dialog>

            <!-- 修改的模态窗口 -->
            <el-dialog title="修改员工" :visible.sync="updateDialogTableVisible" width="40%" top="2px">
                <el-form ref="updateEmpRef" :model="emp" label-width="100px" :rules="addEmpRules">
                    <!-- 隐藏域  把用户的id隐藏起来 -->
                    <el-input v-model="emp.userId" type="hidden"></el-input>
                    <el-form-item label="姓名" prop="realName">
                        <el-input v-model="emp.realName"></el-input>
                    </el-form-item>
                    <el-form-item label="帐号" prop="userName">
                        <el-input v-model="emp.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="userPassword">
                        <el-input v-model="emp.userPassword"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式" prop="userTel">
                        <el-input v-model="emp.userTel"></el-input>
                    </el-form-item>
                    <el-form-item label="地址">
                        <el-input v-model="emp.address"></el-input>
                    </el-form-item>
                    <el-form-item label="时间">
                        <el-date-picker
                            v-model="emp.createDate"
                            type="date"
                            placeholder="选择日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="是否激活用户">
                        <el-switch
                            v-model="emp.active"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="部门">
                        <el-select v-model="emp.deptno" placeholder="请选择部门">
                            <el-option v-for="dept in deptData" :key="dept.deptno" :label="dept.dname" :value="dept.deptno"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                    
                <span slot="footer" class="dialog-footer">
                    <el-button @click="updateDialogTableVisible = false">取 消</el-button>
                    <el-button type="primary" @click="updateEmp">修改员工</el-button>
                </span>
            </el-dialog>
        </el-card>

    </div>
</template>

<script >
export default {
    data(){
        var checkTel = (rule, value, callback) => {//自定义验证
            const regTel=/^[1][3,4,5,7,8][0-9]{9}$/   //正则表达式
            if (regTel.test(value)) {  //把输入的值与正则校验
                callback()
            }else{
                callback(new Error('手机格式不正确'))
            }
            
        }
        return{
            empData: [],
            pageUtil:{},
            formLabelWidth: '120px',
            addDialogTableVisible: false,
            updateDialogTableVisible: false,
            pageArgs:{
                currentPage: 1,  //当前页码
                pageSize: 5,     //每页显示的记录数
                searchkey: ''    //要搜索的数据
            },
            emp:{
                realName: '',
                userName: '',
                userPassword: '',
                userTel: '',
                address: '',
                createDate: '',
                active: false,
                deptno: '',
            },
            deptData:[],
            addEmpRules: {
                realName:[
                    { required: true, message: '请输入姓名', trigger: 'blur' },
                    { min: 3, max: 20, message: '帐号长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                userName:[
                    { required: true, message: '请输入帐号', trigger: 'blur' },
                    { min: 3, max: 20, message: '帐号长度在 3 到 20 个字符', trigger: 'blur' }
                ],
                userPassword:[
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 6, max: 20, message: '密码的长度在 6 到 20 个字符', trigger: 'blur' }
                ],
                userTel:[
                    { required: true, message: '请输入手机号', trigger: 'blur' },
                    { validator: checkTel, trigger: 'blur' }  //使用自定义验证
                ]
            }
        }
    },
    created() {
        this.getEmpPage()
    },
    methods: {
        formatter(row, column, cellValue, index) {
            let t = new Date(cellValue)
            let y = t.getFullYear()
            let m = (t.getMonth() + 1) < 10 ? '0' + (t.getMonth() + 1) : t.getMonth() + 1
            let d = t.getDate() < 10 ? '0' +  t.getDate() : t.getDate()

            let time = y + '-' + m + '-' + d

            return time
        },
        getEmpPage() {//分页查询
            this.$axios.get('emp/pageEmp',{params: this.pageArgs}).then(request=>{
                // console.log(request.data.data.data)
                this.empData = request.data.data.data
                this.pageUtil = request.data.data
                
            })
        //    let res = await this.$axios.get('emp/pageEmp',{params: this.pageArgs})
        //    console.log(res);
        },
        updateActive(userId,active){
            this.$axios.get('emp/updateActive',{params: {'userId':userId,'active':active}}).then(request=>{
                //修改成功后再次调用分页查询的方法
                this.getEmpPage()
            })
        },
        updateEmp(){
            this.$axios.put('emp/updateEmp',this.emp).then(request=>{
                //修改成功后再次调用分页查询的方法
                this.getEmpPage()
                this.updateDialogTableVisible=false   //关闭修改员工的模态窗口
            })
        },
        handleSizeChange(newPageSize) {  //每页显示的记录数的改变
            //console.log(newPageSize);
            this.pageArgs.pageSize=newPageSize
            this.getEmpPage()
        },
        handleCurrentChange(newCurrentPage ){  //页码改变
            this.pageArgs.currentPage=newCurrentPage
            this.getEmpPage()
        },
        secarch(){  //搜索
            this.getEmpPage()
        },
        async showAddDialog() {  //添加员工所打的模态窗口   //async 标注为异步方法
            this.addDialogTableVisible=true
            //查询所有的部门  //结构化赋值  把查询出来的数据(data)赋给res变量
            let {data : res} = await this.$axios.get("dept/getAllDept")
            this.deptData=res.data
        },
        addEmp(){

            //addEmpRef：获取refs中的对象
           this.$refs.addEmpRef.validate(valid=>{//是否能获取form表单中的数据，能则进行下一步的操作，
                if(valid){
                     this.$axios.put('emp/addEmp',this.emp).then(res=>{
                         this.addDialogTableVisible=false; //关闭添加的模态窗口
                         if(res.data.statusCode == 200){
                            this.$message.success(res.data.statusMessage)
                            //调用一下分页查询
                            this.getEmpPage()
                            //把emp对象清空
                            this.emp.realName=''
                            this.emp.userName=''
                        }else{
                            this.$message.error(res.data.statusMessage)
                        }
                     })
                        
                }
            })  
        },
        async getAllDept(){
                let {data : res} = await this.$axios.get("dept/getAllDept") //查询所有部门
                this.deptData=res.data //为部门对象赋值
        }, 
        showUpdateEmpDialog(userId){  //打开修改员工的模态窗口
            console.log(userId)
            this.$axios.get('emp/getEmpById/'+userId ).then(request=>{
                if(request.data.statusCode==200){
                    this.emp=request.data.data
                    this.updateDialogTableVisible=true   //打开修改员工的模态窗口
                    //调用查询所有部门的方法
                    this.getAllDept()
                }else{
                    this.$message.error(request.statusMessage)
                }
            })


            // this.$axios.get('emp/getEmpById/'+userId ).then(res=>{

            // }).then(res2=>{}).catch(error=>{})

            // 
            // let {data : res} = await this.$axios.get("dept/getAllDept")  //查询所有部门
            // this.deptData=res.data //为部门对象赋值
        },
        deleteEmp(userId) {
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {

                this.$axios.delete('emp/deleteUser/'+userId).then(res=>{
                    if(res.data.statusCode==200){
                        this.$message.success(res.data.statusMessage)
                        //调用分页查询的方法
                        this.getEmpPage()
                    }else{
                        this.$message.error(res.data.statusMessage)
                    }
                })

            }).catch(() => {
            this.$message({
                type: 'info',
                message: '已取消删除'
            });          
            });   
        },
        daoChu() {
            this.$axios.get('emp/daoChuData',{params: this.pageArgs}).then(res=>{
                if(res.data.statusCode==200){
                    this.$message.success(res.data.statusMessage)
                }
            })
        }
    }
}
</script>

<style scoped>


</style>